$(function () {
    var img ='<ul class="slider">'+
        '<li>'+'<img src="../image/1.jpg"/>'+'</li>'+
        '<li>'+'<img src="../image/2.jpg"/>'+'</li>'+
        '<li>'+'<img src="../image/4.jpg"/>'+'</li>'+
        '<li>'+'<img src="../image/5.jpg"/>'+'</li>'+
        '</ul>'+
        '<ul class="num">'+'</ul>';
    $("#scrollPics").append(img);

    var slider = $('#scrollPics .slider');
    var imgCon = $('#scrollPics .slider li');  //获取图片
    imgCon.not(imgCon.eq(0)).hide();  //除第一张其它隐藏
    var num = $('#scrollPics .num'); //定义页码
    var len = slider.find('li').length;
    var html_page = '', index = 0;

    //添加页码
    for (var i = 0; i < len; i++) {
        if (i === 0) {
            html_page += '<li class=on >' + (i + 1) + '</li>';
        } else {
            html_page += '<li>' + (i + 1) + '</li>';
        }
    }
    num.html(html_page);

    //显示索引对应的图片
    function showPic(index) {
        imgCon.eq(index).show().siblings("li").hide();
        num.find("li").eq(index).addClass('on').siblings("li").removeClass("on");
    }

    //页码按钮移入
    $('.num li').mouseover(function () {
        index = $(this).index();   //获取索引
        showPic(index);
    })
    $('#scrollPics').hover(function () {
        clearInterval(window.timer);
        //当鼠标悬浮在图片上，不变化
    }, function () {
        window.timer = setInterval(function () {
            showPic(index);
            index++;
            if (index === len) {
                index = 0;
            }
        }, 2000);
    }).trigger('mouseleave');
    //鼠标离开的时候执行
    //触发被选元素的指定事件
});

// not(a) 除a以外全部
// eq（数字index）匹配元素集缩减值指定 index 上的一个，从0开始，例如index为1，为第二个元素
// find() jq寻找
// html() 直接改变原来内容
// append() 添加
// siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的
// class="on" 高亮显示
// mouseover() 鼠标放在上面
// clearInterval() 去除计时器
// setInterval（func(),a）按时间周期执行
// trigger() 方法触发被选元素的指定事件类型。